<template>
  <div class="iframe">
    <div class="i-title">
      <h3>使用 customRef 防抖</h3>
    </div>
    <div class="i-tip">
      <el-input type="text" v-model="inpValue" />
      <div class="i-tip">{{ inpValue }}</div>
    </div>
  </div>
</template>

<script setup>
import {
  customRef
} from "vue";

// 自定义一个 v-model
function myRef(value,delay) {
  return customRef((track, trigger) => {
    let timer;// 用于接收定时器
    return {
      get() {
        console.log('get调用了');
        track() // 会通知vue追踪value的变化
        return value;
      },
      set(newValue) {
        console.log('set调用了');
        clearTimeout(timer);// 清空定时器
        // 修改数据时会自动调用该方法
        timer = setTimeout(() => {
          value = newValue;
          trigger(); // 通知vue去解析模版(解析就会调用get去获取新的数据了)
        }, delay);
      }
    }
  })
}
let inpValue = myRef('hello',1000)

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
